<template>
  <div class="home">
    <Layout>
      <DotTitle title="驾驶舱导览"></DotTitle>
      <NavCard class="mt-20" :list="controlCabinList" :initIndex="firstIndex"
               @send-message="sendFirstMessage"></NavCard>
      <DotTitle title="子模块" class="mt-60"></DotTitle>
      <NavCard class="mt-20" :list="keyPointList" :initIndex="secondIndex" @send-message="sendSecondMessage"></NavCard>
      <div class="item-between">
        <!-- <div>
          <DotTitle title="自动演示" class="mt-60"></DotTitle>
          <div class="demonstration-card-container">
            <DemonstrationCard class="mt-20" :info="item" v-for="item in demonstratioCardList" :key="item.name"></DemonstrationCard>
          </div>
        </div> -->
        <div class="voice-control-container">
          <DotTitle title="语音控制" class="mt-60"></DotTitle>
          <div class="item-between-center">
            <div class="record-input-container">
              <RecordInput class="mt-20" :info="item" v-for="item in recordInputList" :key="item.label"></RecordInput>
            </div>
            <div class="text-align-center animate__animated animate__fadeInBottomRight">
              <div @click="toggleRecord">
                <img :src="require('@/assets/record/record-off.png')" alt="" class="record-icon" v-if="!pressFlag">
                <img :src="require('@/assets/record/record-on.gif')" alt="" class="record-icon" v-else>
              </div>
              <p class="tips">点击按钮,可以识别语音哦</p>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import Layout from '@/layout/index.vue'
import DotTitle from '@/components/DotTitle/index.vue'
import NavCard from '@/components/NavCard/index.vue'
// import DemonstrationCard from '@/components/DemonstrationCard/index.vue'
import RecordInput from '@/components/RecordInput/index.vue'

import { ElMessage } from 'element-plus'

import useRecord from '@/composition/record'
// import useSocket from '@/composition/socket'

import { getPad } from '@/api/pad'
import { IPad } from '@/types/type'

export default defineComponent({
  name: 'Home',
  components: {
    Layout,
    DotTitle,
    NavCard,
    // DemonstrationCard,
    RecordInput
  },
  setup () {
    // data
    const controlCabinList = reactive([
      {
        icon: require('@/assets/control-cabin/overview.png'),
        name: '花园总览'
      },
      {
        icon: require('@/assets/control-cabin/red.png'),
        name: '红色花园'
      },
      {
        icon: require('@/assets/control-cabin/safe.png'),
        name: '平安花园'
      },
      {
        icon: require('@/assets/control-cabin/harmonious.png'),
        name: '和谐花园'
      },
      {
        icon: require('@/assets/control-cabin/green.png'),
        name: '绿色花园'
      },
      {
        icon: require('@/assets/control-cabin/asset.png'),
        name: '资产管理'
      },
      {
        icon: require('@/assets/control-cabin/asset.png'),
        name: '架构图'
      },
    ])
    const keyPointList = ref([
      {
        icon: require('@/assets/screenshot/overview-1.png'),
        name: '共治事件'
      },
      {
        icon: require('@/assets/screenshot/overview-2.png'),
        name: '事件呈现'
      }
    ])
    const parentName = ref('花园总览')
    const firstIndex = ref(0)
    const secondIndex = ref(100)
    // const demonstratioCardList = reactive([
    //   { icon: require('@/assets/auto-demonstration/joint-account-of-party-members.png'), name: '党员联户' },
    //   { icon: require('@/assets/auto-demonstration/intelligent-security.png'), name: '智慧安防' },
    //   { icon: require('@/assets/auto-demonstration/green-agriculture.png'), name: '绿色农业' },
    //   { icon: require('@/assets/auto-demonstration/separate-layers-and-households.png'), name: '分层分户' }
    // ])
    const recordInputList = reactive([
      { label: '语音识别', value: '' },
      { label: '执行操作', value: '' }
    ])
    const pressFlag = ref(false)

    // record-composition
    const { recOpen, recStart, recStop, parseMsg } = useRecord()

    recordInputList[0].value = parseMsg

    const toggleRecord = () => {
      console.log("点击识别语音")
      // click录音
      pressFlag.value = !pressFlag.value
      if (pressFlag.value) {
        ElMessage({
          type: 'success',
          message: '正在录音中...',
          duration: 0
        })
        recOpen(() => {
          recStart()
        })
      } else {
        recStop()
        ElMessage.closeAll()
      }
    }

    // socket-composition
    // const { init, send } = useSocket()
    // // 天猫精灵语音识别的websocket
    // init('ws://10.254.39.227:7982/websocket')
    // // 父组件回调
    // const sendMessage = (msg: string) => {
    //   send(msg)
    // }

    // 接口
    const sendFirstMessage = (msg: string, index: number) => {
      console.log('msg: ', msg)
      const slotMapping = new Map([
        ['花园总览', [
          {
            icon: require('@/assets/screenshot/overview-1.png'),
            name: '共治事件'
          },
          {
            icon: require('@/assets/screenshot/overview-2.png'),
            name: '事件呈现'
          }
        ]],
        ['红色花园', [
          {
            icon: require('@/assets/screenshot/red-1.png'),
            name: '第一支部'
          },
          {
            icon: require('@/assets/screenshot/red-2.png'),
            name: '邵军燕'
          },
          {
            icon: require('@/assets/screenshot/red-3.png'),
            name: '邵军燕户信息'
          },
          {
            icon: require('@/assets/screenshot/red-4.png'),
            name: '党员联系户'
          }
        ]],
        ['平安花园', [
          {
            icon: require('@/assets/screenshot/safe-1.png'),
            name: '监控查看'
          },
          {
            icon: require('@/assets/screenshot/safe-2.png'),
            name: '红木家具城'
          },
          {
            icon: require('@/assets/screenshot/safe-3.png'),
            name: '鹰眼'
          }
        ]],
        ['和谐花园', [
          {
            icon: require('@/assets/screenshot/harmonious-1.png'),
            name: '花园公交'
          },
          {
            icon: require('@/assets/screenshot/harmonious-2.png'),
            name: '天香湾'
          }
        ]],
        ['绿色花园', [
          {
            icon: require('@/assets/screenshot/green-1.png'),
            name: '智能温室大棚'
          },
          {
            icon: require('@/assets/screenshot/green-2.png'),
            name: '大棚查看'
          },
          {
            icon: require('@/assets/screenshot/green-3.png'),
            name: '大棚监控'
          },
          {
            icon: require('@/assets/screenshot/green-4.png'),
            name: '充电站'
          }
        ]],
        ['资产管理', [
          {
            icon: require('@/assets/screenshot/asset-1.png'),
            name: '花园大道'
          },
          {
            icon: require('@/assets/screenshot/asset-2.png'),
            name: 'VR'
          }
        ]]
      ])
      keyPointList.value = slotMapping.get(msg) as never[]
      parentName.value = msg
      firstIndex.value = index
      secondIndex.value = 100
      const params = {
        msg,
        active: 3,
        slot: ''
      }
      console.log('params: ', params)
      getPad(params as IPad).then((res: any) => {
        if (res.status === 0) {
          ElMessage({
            type: 'success',
            message: '操作成功'
          })
        } else {
          if (res.status === 0) {
            ElMessage({
              type: 'error',
              message: res.msg
            })
          }
        }
      })
    }

    const sendSecondMessage = (msg: string, index: number) => {
      console.log('msg: ', msg)
      secondIndex.value = index
      const params = {
        msg: parentName.value,
        active: 3,
        slot: msg
      }
      console.log('params: ', params)
      getPad(params as IPad).then((res: any) => {
        if (res.status === 0) {
          ElMessage({
            type: 'success',
            message: '操作成功'
          })
        } else {
          if (res.status === 0) {
            ElMessage({
              type: 'error',
              message: res.msg
            })
          }
        }
      })
    }

    return {
      controlCabinList,
      keyPointList,
      // demonstratioCardList,
      recordInputList,
      // pressFlag,
      toggleRecord,
      // sendMessage
      sendFirstMessage,
      sendSecondMessage,
      firstIndex,
      secondIndex
    }
  }
})
</script>

<style lang="scss">
.home {
  .demonstration-card-container {
    width: 13.78rem;
    display: flex;
    justify-content: space-between;
  }

  .voice-control-container {
    width: 11rem;
    margin-left: .7rem;

    .record-input-container {
      width: 7.6rem;
    }

    img.record-icon {
      width: 2.18rem;
      height: 2.19rem;
    }
  }

  .tips {
    font-family: Arial;
    font-size: .2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .62rem;
    letter-spacing: 0rem;
    color: #9c9c9c;
  }
}
</style>
